<!-- 首页产品列表，展示一系列产品 -->
<template>
    <div class="home-product">
        <div class="home-goods" v-for="item in productDataList" :key="item.id">
            <div class="container">
                <!-- 标题 -->
                <HomeTitle>
                    <template slot="title">
                        <h3>{{ item.name }}</h3>
                    </template>
                    <template slot="nav">
                        <ul>
                            <li v-for="children in item.children" :key="children.id">
                                <router-link :to="`/category/sub/${children.id}`">{{ children.name }}</router-link>
                            </li>
                        </ul>
                    </template>
                    <template slot="more">
                        <router-link :to="`/category/${item.id}`" class="more">
                            <span>查看全部</span>
                            <i class="iconfont icon-right"></i>
                        </router-link>
                    </template>
                </HomeTitle>

                <!-- 列表内容 -->
                <div class="product-content">
                    <router-link :to="`/category/${item.id}`" class="cover">
                        <!-- v-lazy 图片懒加载控件，在组件入口处已经使用此插件-->
                        <img v-lazy="item.picture" alt="" />
                        <div class="lable">
                            <span>{{ item.name }}馆</span>
                            <span>{{ item.saleInfo }}</span>
                        </div>
                    </router-link>
                    <ul class="goods-list">
                        <li v-for="goods in item.goods" :key="goods.id">
                            <div class="good-item">
                                <router-link :to="`/goods/${goods.id}`" class="image"><img v-lazy="goods.picture"
                                        alt="" /></router-link>
                                <p class="name">{{ goods.name }}</p>
                                <p class="desc ellipsis">{{ goods.desc }}</p>
                                <p class="price">￥{{ goods.price }}</p>
                                <div class="extra">
                                    <a href="javascript:;">
                                        <span>找相似</span>
                                        <span>发现现多宝贝</span>
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import HomeTitle from './home-title';
import { getGoods } from '@/api/home';
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload);
export default {
    name: 'HomeProduct',
    data: function () {
        return {

            productDataList: [],
        }
    },
    components: {
        HomeTitle,
    },
    mounted() {
        getGoods().then(data => {
            if (data.data.code === '1') {
                this.productDataList = data.data.result;
                console.log(this.productDataList[0]);
            }
        });
    }


}
</script>
<style lang="less" scoped>
@import '@/assets/styles/variables.less';

.home-product {
    .home-goods {
        .container {
            .product-content {
                display: flex;

                .cover {
                    width: 240px;
                    height: 620px;
                    margin-right: 10px;
                    position: relative;

                    img {
                        width: 100%;
                        height: 100%;
                        -o-object-fit: cover;
                        object-fit: cover;
                    }

                    .lable {
                        width: 188px;
                        height: 66px;
                        display: flex;
                        font-size: 18px;
                        color: #fff;
                        line-height: 66px;
                        font-weight: 400;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);

                        span {
                            text-align: center;

                            &:first-child {
                                width: 76px;
                                background: rgba(0, 0, 0, 0.9);
                            }

                            &:last-child {
                                flex: 1;
                                background: rgba(0, 0, 0, 0.7);
                            }
                        }
                    }
                }

                .goods-list {
                    width: 990px;
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        width: 240px;
                        height: 300px;
                        margin-right: 10px;
                        margin-bottom: 10px;

                        &:nth-child(4n) {
                            margin-right: 0;
                        }

                        .good-item {
                            width: 100%;
                            height: 100%;
                            padding: 10px 30px;
                            position: relative;
                            overflow: hidden;
                            border: 1px solid transparent;
                            transition: all 0.5s;

                            &:hover {
                                border: 1px solid @themeColor;
                            }

                            &:hover>.extra {
                                transform: none;
                            }

                            .image {
                                display: block;
                                width: 160px;
                                height: 160px;
                                margin: 0 auto;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            p {
                                margin-top: 6px;
                                font-size: 16px;
                            }

                            .name {
                                height: 44px;
                            }

                            .desc {
                                color: #666;
                                height: 22px;
                            }

                            .price {
                                margin-top: 10px;
                                font-size: 20px;
                                color: @priceColor;
                            }

                            .extra {
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                height: 86px;
                                width: 100%;
                                background: #27ba9b;
                                text-align: center;
                                transform: translate3d(0, 100%, 0);
                                transition: all 0.5s;

                                a {
                                    span {
                                        display: block;
                                        color: #fff;
                                        width: 120px;
                                        margin: 0 auto;
                                        line-height: 30px;

                                        &:first-child {
                                            font-size: 18px;
                                            border-bottom: 1px solid #fff;
                                            line-height: 40px;
                                            margin-top: 5px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}</style>